<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入任务名称 / 执行人 / 内容" clearable>
                <template #append>
                    <el-button @click="getPatrolTask"> 搜索 </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示workOrder数据 -->
    <el-table :data="patrolTaskData" style="width: 100%" max-height="480">
        <el-table-column prop="id" v-if="false" />
        <el-table-column prop="name" label="任务名称" width="330">
            <template #default="{ row }">
                <el-button link type="primary" @click="showTaskDetail(row)">{{ row.name }}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="指派人" width="100">
            <template #default="{ row }">
                <el-tag effect="dark">{{ row.employeeName }}</el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="createTime" label="生成时间" width="110" sortable/>
        <el-table-column prop="planContent" label="任务内容" width="250" />
        <el-table-column prop="completeStatus" label="任务状态" width="110" sortable>
            <template #default="{ row }">
                <el-tag v-if="row.completeStatus == '0'" type="warning">未完成</el-tag>
                <el-tag v-if="row.completeStatus == '1'" type="success">已完成</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="closeStatus" label="关闭状态" width="110" sortable>
            <template #default="{ row }">
                <el-tag v-if="row.closeStatus == '0'">未关闭</el-tag>
                <el-tag v-if="row.closeStatus == '1'" type="info">已关闭</el-tag>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">

            <template #default="{ row }">
                <el-popconfirm v-if="row.completeStatus == '0'" width="220" confirm-button-text="确认" cancel-button-text="取消"
                    @confirm="switchCloseStatus(row.id)" icon-color="#F56C6C" title="确认切换工单开/关状态？">
                    <template #reference>
                        <el-button link type="primary" size="small">关闭/打开</el-button>
                    </template>
                </el-popconfirm>
            </template>

        </el-table-column>

    </el-table>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getPatrolTask"
                    @current-change="getPatrolTask" />
            </div>
        </div>
    </div>

    <!-- 任务详情弹窗 -->
    <el-dialog v-model="showTaskDetailDialog" title="任务详情" width="800">

        <el-row>
            <el-col :span="12">
                <h3>任务名称:</h3> {{ taskDetail.name }}
            </el-col>
            <el-col :span="12">
                <h3>任务id:</h3> {{ taskDetail.id }}
            </el-col>
        </el-row>
        <el-divider />
        <el-row>
            <el-col :span="8">
                <h4>所属计划:（id :{{ taskDetail.planId }}）</h4> {{ taskDetail.planName }}
            </el-col>
            <el-col :span="8">
                <h4>生成时间:</h4> {{ taskDetail.createTime }}
            </el-col>
            <el-col :span="8">
                <h4>任务内容:</h4> {{ taskDetail.planContent }}
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <h4>执行人:（id :{{ taskDetail.employeeId }}）</h4> {{ taskDetail.employeeName }}
            </el-col>
            <el-col :span="8">
                <h4>处理时间:</h4>
                <span v-if="taskDetail.handleTime == null"> - </span>
                <span v-else>{{ taskDetail.handleTime }}</span>
            </el-col>
            <el-col :span="8">
                <h4>处理备注:</h4>
                <span v-if="taskDetail.handleRemark == null"> - </span>
                <span v-else>{{ taskDetail.handleRemark }}</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <h4>完成状态:</h4>
                <el-tag v-if="taskDetail.completeStatus == '1'" type="success" effect="dark"> 已完成 </el-tag>
                <el-tag v-else type="warning" effect="dark">未完成</el-tag>
            </el-col>
            <el-col :span="8">
                <h4>关闭状态:</h4>
                <el-tag v-if="taskDetail.closeStatus == '1'" type="info"> 已关闭 </el-tag>
                <el-tag v-else>未关闭</el-tag>
            </el-col>
        </el-row>



    </el-dialog>
</template>



<script setup>
import axios from "axios";
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { patrolTaskGetService, patrolTaskSwitchCloseStatusService } from '@/api/patrol';


// 初始化参数
// 按姓名模糊搜索、分页
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 工单信息列表
const patrolTaskData = ref([])
// 展示任务详情弹出框
const showTaskDetailDialog = ref(false)
// 任务详情
const taskDetail = ref({
    id: null,
    name: null,
    planName: null,
    employeeName: null,
    createTime: null,
    planContent: null,
    completeStatus: null,
    closeStatus: null,
    handleTime: null,
    handleRemark: null
})

const showTaskDetail = (data) => {
    taskDetail.value = data
    showTaskDetailDialog.value = true
}


// 获取巡查任务信息
async function getPatrolTask() {
    try {
        // let result = await axios({
        //     url: 'http://localhost:8081/patrol/task',
        //     method: 'get',
        //     params: {
        //         search: search.value,
        //         currentPage: currentPage.value,
        //         pageSize: pageSize.value
        //     },
        //     headers: { 'Authorization': localStorage.getItem("jwtToken") }
        // })
        let result = await patrolTaskGetService(search.value, currentPage.value, pageSize.value)
        if (result.code == 200) {
            patrolTaskData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.warning(result.msg)
            patrolTaskData.value = []
            total.value = 0
        }
    } catch (error) {
        ElMessage.error('系统异常 (getPatrolTask)')
    }
}
// 更改巡查任务开关状态
async function switchCloseStatus(id) {
    try {
        // let result = await axios({
        //     url: 'http://localhost:8081/patrol/task/switchCloseStatus/' + id,
        //     method: 'put',
        //     headers: { 'Authorization': localStorage.getItem("jwtToken") }
        // })
        let result = await patrolTaskSwitchCloseStatusService(id);
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getPatrolTask()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.warning(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (switchCloseStatus)')
    }
}


// 该组件被渲染时调用
onMounted(() => {
    getPatrolTask();
})


</script>

<style>
.header {
    margin-bottom: 7px;
}
</style>